<#define __SERVER__="{{LAM.SERVER}}" />
<#define __INDEX__="{{LAM.INDEX}}" />
#define# __DATA__ <#include repeat="0" tp-data="{}"  file="__SERVER__/shop/index" /> #end#
#define# __BILLID__ <#include repeat="0" tp-data="{}"  file="__SERVER__/goods/generateId" /> #end#

<#define _TITLE_="添加商品" />

<#extends title="_TITLE_" data="{'list':[
{'name':'商品','href':'###','title':''},
{'name':'店铺管理','href':'###','title':''},
{'name':'_TITLE_'}
]}" />

<#beginBlock id="crumb" data="{'list':[
{'name':'店铺管理','href':'###','title':''},
{'name':'店铺管理','href':'###','title':''},
{'name':'_TITLE_'}
]}">
<#endBlock>


<#Block:begin id="input-text">
<li class="L ml5">
    <label class="L"> ${ label } ：<span v-if="warning" class="warning">*</span></label>
    <input type="text" :name="name" :style="input_style" :class="'text name L ml5' + input_class" :value="value">
    <span :data-error="name" class="help-block none"></span>
</li>
<#Block:end>


<#Block:begin id="goods">
<div class="sectionForm-A1 sectionForm-A1-1 sectionForm-A1-1-1 mb15">
    <ul class="clear mb5 row">
        <li class="L mr15"><input name="listId" type="radio" @click="handelClick(index)" v-model="picked" :value="index" /> ${ index+1 } </li> 
        <input-text v-model="list['name']" :name="list['name']" label="商店名称" input_style="width:120px;" />
        <input-text v-model="list['number']" :name="list['number']" label="数量" input_style="width:45px;" value="" input_class="number" />
        <input-text v-model="list['weight']" :name="list['weight']" label="重量" input_style="width:45px;" value="1" input_class="weight" />
        <input-text v-model="list['single_price']" :name="list['single_price']" label="单价" input_style="width:45px;" value="1" input_class="single_price" />
        <input-text v-model="list['final_price']" :name="list['final_price']" label="结算价格" input_style="width:45px;" value="1" input_class="final_price" />
    </ul>
</div>
<#Block:end>

<form class="form-horizontal" action="__SERVER__/goods/add" method="post">
    <div class="sectionWrap-A5">
        <div id="goodsApp">
            <div class="sectionForm-A1 sectionForm-A1-1 sectionForm-A1-1-1" style="margin-bottom: 100px;">
                <ul class="clear">
                    <li class="L ml5 sectionButton-B1">
                        <label class="L">店铺：<span class="warning">*</span></label>
                        <select class="L ml10" name="shop_id" style="width:115px;">
                            <option value="0">请选择</option>
                            <option v-for="v in shops" :value="v.id"> ${ v.name } </option>
                        </select>
                        <span data-error="shop_id" class="help-block none"></span>
                        <a href="__INDEX__shop/create" class="btn save L ml5">添加店铺</a>
                    </li>
                    <li class="R sectionButton-B1">
                        <button type="button" @click="handelAdd" class="btn save L mr15">添加</button>
                        <button type="button" @click="handelCopy" class="btn save L mr15">复制</button>
                        <button type="button" @click="handelRemove" class="btn save L mr15">删除</button>
                    </li>
                    <input-text name="bill_id" label="账单号" input_style="width:120px;" value="__BILLID__" input_class="final_price" />
                    <input-text name="discount" label="折扣价" input_style="width:30px;" value="0" input_class="discount" />
                    <input-text name="create_by" input_style="width:30px;" label="创建日期" />
                    
                </ul>
            </div>
            <div>
                <div class="sectionForm-A1 sectionForm-A1-1 sectionForm-A1-1-1 mb15" v-for="(v, i) in list" :key="i">
                    <ul class="clear mb5 row">
                        <li class="L mr15"><input name="listId" type="radio" @click="handelClick(i)" v-model="picked" :value="i" /> ${ i+1 } </li> 
                        <input-text v-model="v['name']" label="商店名称" input_style="width:120px;" />
                        <input-text v-model="v['number']" label="数量" input_style="width:45px;" input_class="number" />
                        <input-text v-model="v['weight']" label="重量" input_style="width:45px;" value="1" input_class="weight" />
                        <input-text v-model="v['single_price']" label="单价" input_style="width:45px;" value="1" input_class="single_price" />
                        <input-text v-model="v['final_price']" label="结算价格" input_style="width:45px;" value="1" input_class="final_price" />
                    </ul>
                </div>
            </div>
            <div class="row mb10">
                <div class="col-sm-1">
                    总金额: <span id="total">0.00</span>
                </div>
                <div class="col-sm-1"><a class="btn btn-default">结算</a></div>
            </div>

            <div class="clear mb10 sectionForm-A1 sectionForm-A1-1-1 sectionForm-A2">
                <button type="submit" class="btn save L mr15">提交</button>
                <button type="reset" class="btn btn-cancel L">恢复</button>
            </div>
        </div>
    </div>
</form>

<script type="text/javascript">
    
    
    LAM.run([jQuery],function($) {
        'use strict';
        var System = this;


        $(function(){

            var delimiters = ['${', '}'];


            Vue.component('input-text', {
              props: {
                'name': String,
                'label': String, 
                'warning': {
                    type: Boolean,
                    default: true
                }, 
                'value': {
                    type: String,
                    default: ''
                }, 
                'input_style': {
                    type: String,
                    default: ''
                }, 
                'input_class': {
                    type: String,
                    default: ''
                }
              },
              delimiters: delimiters,
              data: function () {
                return {
                }
              },
              methods: {
              },
              template: System.Template.getBlock('input-text')
            });
            var n = 0;

            Vue.component('the-goods', {
              props: {
                index: Number,
                list: {
                    type: Object
                }
              },
              data: function () {
                return {
                    'picked': '',
                    'n': 0

                }
              },
              methods: {
                handelClick: function (i) {
                    n = i;
                }
              },
              delimiters: delimiters,
              template: System.Template.getBlock('goods')
            });

            var goods = {
                'name': '',
                'number': '',
                'weight': '',
                'single_price': '',
                'final_price': ''
            };

            new Vue({
              el: '#goodsApp',
              delimiters: delimiters,
              data: {
                picked: '',
                n: 0,
                shops: __DATA__.data,
                list: [System.clone(goods)]
              },
              methods: {
                handelAdd: function () {
                    this.list.push(System.clone(goods));
                },
                handelClick: function (i) {
                    this.n = i;
                },
                handelCopy: function () {
                    this.list.push(System.clone(this.list[this.n]));
                },
                handelRemove: function () {

                }
              }
            });
        });
    });
</script>

<style type="text/css">
    .sectionWrap-A5{width:auto;margin:0 auto;}
    .sectionForm-A1-1-1 label{width:66px;margin:0;}
    .sectionForm-A1-1 .text.name{width: 66px;}
</style>

